<html xmlns:th="http://www.w3.org/1999/xhtml">
    <head th:replace="_fragments :: head(~{::title})">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>详情页</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
        <link rel="stylesheet" href="../static/css/typo.css">
        <link rel="stylesheet" href="../static/css/me.css">
    </head>
    <body>
        <!-- 导航 -->
        <nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment m-padded-ta-mini" >
        </nav>
        <!-- 中间内容 -->
        <div class="m-padded-tb-big m-container-small">
            <div class="ui container">
                <div class="ui top attached segment">
                    <!-- 头部 -->
                    <div class="ui mini horizontal link list">
                        <div class="item">
                            <img src="https://picsum.photos/seed/picsum/100/100" th:src="@{${blog.user.avatar}}"  class="ui avatar image">
                            <div class="content">
                                <a href="#" class="header" th:text="${blog.user.nickname}">二肥</a>
                            </div>
                        </div>
                        <div class="item">
                            <i class="calendar icon" th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}"></i>2017-10-1
                        </div>
                        <div class="item">
                            <i class="eye icon" th:text="${blog.views}"></i>123
                        </div>
                    </div>
                </div>
                <div class="ui attached segment">
                    <!-- 图片区域 -->
                    <img src="https://picsum.photos/seed/picsum/800/450" th:src="@{${blog.firstPicture}}" class="ui fluid rounded image">
                </div>
                <div class="ui attached segment">
                    <div class="ui right aligned basic segment">
                        <div class="ui orange basic label" th:text="${blog.flag}">原创</div>
                    </div>
                    <h2 class="ui center aligned header" th:text="${blog.title}">标题</h2>

                    <div id="content" class="typo typo-selection m-padded-lr m-padded-tb-large" th:utext="${blog.content}">
                        <h3>博客主要内容！</h3>
                    </div>
                    <!-- 标签 -->
                    <div class="m-padded-lr" >
                       <div class="ui basic teal left pointing label" th:each="tag : ${blog.tags}" th:text="${tag}">方法论</div>
                    </div>
                    <!-- 赞赏 -->
                    <div class="ui center aligned basic segment">
                        <button id="payButton" class="ui orange basic circular button">赞赏</button>
                        <!-- 移动到赞赏弹出图片 -->
                    </div>
                    <div class="ui payQR flowing popup transition hidden">
                        <div class="ui orange basic label">
                            <div class="ui images" style="font-size: inherit;">
                                <div class="image">
                                    <img src="../static/image/wx.jpg" th:src="@{/image/wx.jpg}" class="ui rounded bordered image" style="width: 120px;">
                                    <div>支付宝</div>
                                </div>
                                <div class="image">
                                    <img src="../static/image/wx.jpg" th:src="@{/image/wx.jpg}" class="ui rounded bordered image" style="width: 120px;">
                                    <div>微信</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
                <div class="ui attached positive message">
                    <!-- 博客信息 -->
                    <div class="ui middle aligned grid">
                        <div class="eleven wide column">
                            <ul class="list">
                                <li>作者：<span th:text="${blog.user.nickname}">二肥</span><a href="#" th:href="@{/about}">（联系作者）</a></li>
                                <li>发表时间：<span th:text:="${#dates.format(blog.updateTime,'yyy-MM-dd HH:mm')}"></span></li>
                                <li>版权声明：自由转载-非商用-非衍生-保持署名</li>
                                <li>公众号转载：请在文末添加作者公众号二维码</li>
                            </ul>
                        </div>
                        <div class="five wide column">
                            <img src="../static/image/wx.jpg" th:src="@{/image/wx.jpg}" class="ui right floated rounded bordered image" style="width:110px">
                        </div>
                    </div>
                </div>
                <div class="ui bottom attached segment">
                    <!-- 留言区：使用组件 -->
                    <div class="ui teal segment">
                        <div class="ui comments">
                            <h3 class="ui dividing header">Comments</h3>
                            <div class="comment">
                              <a class="avatar">
                                <img src="https://picsum.photos/seed/picsum/100/100">
                              </a>
                              <div class="content">
                                <a class="author">Matt</a>
                                <div class="metadata">
                                  <span class="date">Today at 5:42PM</span>
                                </div>
                                <div class="text">
                                  How artistic!
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                              </div>
                            </div>
                            <div class="comment">
                              <a class="avatar">
                                <img src="https://picsum.photos/seed/picsum/100/100">
                              </a>
                              <div class="content">
                                <a class="author">Elliot Fu</a>
                                <div class="metadata">
                                  <span class="date">Yesterday at 12:30AM</span>
                                </div>
                                <div class="text">
                                  <p>This has been very useful for my research. Thanks as well!</p>
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                              </div>
                              <div class="comments">
                                <div class="comment">
                                  <a class="avatar">
                                    <img src="https://picsum.photos/seed/picsum/100/100">
                                  </a>
                                  <div class="content">
                                    <a class="author">Jenny Hess</a>
                                    <div class="metadata">
                                      <span class="date">Just now</span>
                                    </div>
                                    <div class="text">
                                      Elliot you are always so right :)
                                    </div>
                                    <div class="actions">
                                        <a class="reply">回复</a>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="comment">
                              <a class="avatar">
                                <img src="https://picsum.photos/seed/picsum/100/100">
                              </a>
                              <div class="content">
                                <a class="author">Joe Henderson</a>
                                <div class="metadata">
                                  <span class="date">5 days ago</span>
                                </div>
                                <div class="text">
                                  Dude, this is awesome. Thanks so much
                                </div>
                                <div class="actions">
                                  <a class="reply">回复</a>
                                </div>
                              </div>
                            </div>
                          </div>
                    </div>
                    <div class="form">
                        <form class="ui reply form">
                            <div class="field">
                              <textarea></textarea>
                            </div>
                            <div class="ui blue labeled submit icon button">
                              <i class="icon edit"></i> Add Reply
                            </div>
                          </form>
                    </div>
                </div>
            </div>
        </div>

        <br>
        <br>

        <!-- 底部footer -->
        <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
        </footer>


        <!--/*/<th:block th:replace="_fragments :: script">/*/-->
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
        <!--</th:block>-->
    <script>
        $('.menu.toggle').click(function (){
            $('.m-item').toggleClass('m-mobile-hide');
        });

        $('#payButton').popup({
            popup : $('.payQR.popup'),
            on : 'click',
            position : 'bottom center'
        });
    </script>
    </body>
</html>